<template>
    <div class="magnifier">
        <canvas ref="canvasDom" :class="{ canvas: true }"></canvas>
        <canvas ref="offCanvasDom" class="off-canvas"></canvas>
    </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue';
import { ref } from 'vue';


const canvasDom = ref<HTMLCanvasElement>();
let ctx: CanvasRenderingContext2D, width: number, height: number;

const drawClock = () => {
    ctx.clearRect(0, 0, width, height)
    ctx.save();
    // 设置0点 初始位置
    ctx.translate(width / 2, height / 2)
    ctx.rotate(-Math.PI / 2);
    ctx.save();

    // 绘制小时的刻度
    for (let i = 0; i < 12; i++) {
        ctx.beginPath();
        ctx.moveTo(170, 0);
        ctx.lineTo(190, 0);
        ctx.lineWidth = 8;
        ctx.strokeStyle = 'gray';
        ctx.stroke();
        ctx.closePath();
        ctx.rotate(2 * Math.PI / 12)
    }

    ctx.restore();
    ctx.save();

    // 绘制分钟的刻度
    for (let i = 0; i < 60; i++) {
        ctx.beginPath();
        ctx.moveTo(180, 0);
        ctx.lineTo(190, 0);
        ctx.lineWidth = 2;
        ctx.strokeStyle = 'gray';
        ctx.stroke();
        ctx.closePath();
        ctx.rotate(2 * Math.PI / 60)
    }

    // 获取当前时间
    const time = new Date();
    const hour = time.getHours() % 12;
    const min = time.getMinutes();
    const sec = time.getSeconds();

    ctx.restore();
    ctx.save();
    // 绘制秒针
    ctx.rotate(2 * Math.PI / 60 * sec);
    ctx.beginPath();
    ctx.moveTo(-30, 0);
    ctx.lineTo(160, 0);
    ctx.lineWidth = 2;
    ctx.strokeStyle = 'red';
    ctx.stroke();
    ctx.closePath();

    ctx.restore();
    ctx.save();
    // 绘制分针
    ctx.rotate(2 * Math.PI / 60 * min + 2 * Math.PI / 60 / 60 * sec);
    ctx.beginPath();
    ctx.moveTo(-20, 0);
    ctx.lineTo(130, 0);
    ctx.lineWidth = 2;
    ctx.strokeStyle = '#888';
    ctx.stroke();
    ctx.closePath();

    ctx.restore();
    ctx.save();
    // 绘制时针
    ctx.rotate(2 * Math.PI / 12 * hour + 2 * Math.PI / 12 / 60 * min + 2 * Math.PI / 12 / 60 / 60 * sec);
    ctx.beginPath();
    ctx.moveTo(-15, 0);
    ctx.lineTo(110, 0);
    ctx.lineWidth = 2;
    ctx.strokeStyle = '#333';
    ctx.stroke();
    ctx.closePath();

    // 复原
    ctx.restore();
    ctx.restore();

    requestAnimationFrame(drawClock)
}

onMounted(() => {
    if (canvasDom.value) {
        const tmp = canvasDom.value.getContext('2d');
        if (tmp) ctx = tmp;
        console.log(111111112, canvasDom)
        width = canvasDom.value.width = canvasDom.value.offsetWidth;
        height = canvasDom.value.height = canvasDom.value.offsetHeight;

        drawClock();
    }
})
</script>

<style scoped lang="scss">
.magnifier {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    // height: 600px;

    .canvas {
        // margin: 5% auto;
        width: 80%;
        height: 80%;
        border: 1px solid #00ced1;
    }

    .off-canvas {
        display: none;
    }
}

.grab {
    cursor: grab;
}
</style>